<template>
  <div class="circle-container">
    <template v-if="circleData && circleData.length > 0">
        <template v-for="(item) in circleData">
            <div class="circle" :style="{ top: item.top + 'px', left: item.left + 'px' }">
                {{ item.name }}
            </div>
            <Circle :circleData="item.children" :level="level + 1" :parentNode="item"></Circle>
        </template>
    </template>
  </div>
</template>

<script lang="ts" setup>
defineProps(['circleData', 'level', 'parentNode'])
</script>

<style scoped>
.circle-container {
    position: relative;
}

.circle {
    width: 60px;
    height: 60px;
    background-color: greenyellow;

    border-radius: 30px;
    position: absolute;
}
.border {
    position: absolute;
    background-color: black;
}
</style>